<template>
    <div>
        <!-- 头部 -->
        <!-- <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>护肤美妆</span>
            <div class="right1">
            </div>
        </div> -->
        <!-- 主体部分 -->
        <div class="parmain_top1">
           <div class="parminimg1">
              <yd-slider autoplay="3000" >
                  <yd-slider-item v-for="item in order.thumb" :key="item.id"> 
                          <img :src="item"> 
                  </yd-slider-item> 
              </yd-slider>
           </div>
            <div class="parmain1">
               
                <div class="parmaintop_bot1">
                    <div class="parbot1">
                        <div class="">
                            <div v-if="order.is_shoppingmall_auth == 0">￥{{order.market_price}}+{{order.redbag_num}}鸿包</div>
                            <div v-if="order.is_shoppingmall_auth == 1">￥{{order.shop_price}}送{{order.welfareReds==null?'0':order.welfareReds}}鸿包</div>
                            <div v-if="order.is_shoppingmall_auth == 2">{{order.redbag_num}}鸿包</div>
                            <div v-if="order.is_shoppingmall_auth == 3">￥{{order.shop_price}}</div>

                            <div>好货也疯狂</div>
                        </div>
                        <div class="rx1">
                            <span v-if="order.is_admin == 0">热销</span>
                            <span v-if="order.is_admin == 2">直营</span>
                            <span v-if="order.is_admin == 1">商城</span> 
                        </div>
                    </div>
                    <!-- <div class="hongbao1">
                        <span>￥{{order.market_price}}+{{order.redbag_num}}鸿包</span>
                    </div> -->
                    <div class="partitle1">{{order.title}}</div>
                    <div class="parsolid1">
                        <div>已售{{order.sale_number}}件</div>
                        <div>好评{{order.praise}}</div>
                        <div>{{order.province}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="store1 ss" @click="show = true">
            <div>
                 选择规格
            </div>
            <div><img src="../assets/set/next.png" alt=""></div>
        </div>
        <div class="store1">
            <!-- <div class="parlogoimg1">
                
            </div> -->
            <div class="parstorem1">
                 <img :src="order.fascia" alt="">
                <div>{{order.shop_name}}</div>
                <div>&nbsp;</div>
            </div>
            <div class="parjind1" @click="store()">进店看看</div>
        </div>
        <div class="xiangqing1">
            <div class="xqtitle1">商品详情</div>
            <div class="xqimg1">
                <img :src="item" v-for="(item,index) in order.info" :key="index" alt="">
            </div>
        </div>
        <div class="ym"></div>
        <div class="parfoot1">
           <div>
            <div class="parfsy1" @click="index()">
                <img src="../assets/product/pro06.png" alt="">
                <div>首页</div>
            </div>
                <!-- <a  href="http://wpa.qq.com/msgrd?v=3&uin=574201314&site=oicqzone.com&menu=yes" >  -->

            <!-- <div class="parfsy1" v-if="order.qq">
                <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+order.qq+'&site=qq&menu=yes'" target="_blank"  > 
                
                  <img src="../assets/product/pro07.png" alt="">
                  <div>客服</div>
                </a> 
            </div> -->
            <div class="parfsy1"  @click="tishi()">
                  <img src="../assets/product/pro07.png" alt="">
                  <div>客服</div>
            </div>
            </div>
            <div class="goumai1">
                <div class="shoppingcart1" @click="jiaru()">加入购物车</div>
                <div class="purchase1"  @click="goumai()">立即购买</div>
            </div>
        </div>
        <!-- 选择规格 -->
        <yd-popup v-model="show" position="bottom" >
            <div class="upimg1">
                <div>
                   <img :src="orderimg" alt="">
                   <span v-if="order.is_shoppingmall_auth == 0">￥{{parseInt(moneyprice)}}+{{parseInt(hbs)}}鸿包</span> 
                   <span v-if="order.is_shoppingmall_auth == 1">￥{{parseInt(son1)}}送{{parseInt(son2)}}鸿包</span> 
                   <span v-if="order.is_shoppingmall_auth == 2">{{parseInt(hbs)}}鸿包</span> 
                   <span v-if="order.is_shoppingmall_auth == 3">￥{{parseInt(son1)}}</span> 
                </div> 
            </div>
            <div class="boxshou">
               <!-- 0 普通 人民币+红包  market_price  redbag_num -->
               <div class="items" v-if="order.is_shoppingmall_auth == 0" @click="yiji(index,0,item.market_price,item.redbag_num,item.spec_value_group_id,item.spec_value_group)"   v-bind:class="{activss:indexs==index}"  v-for="(item,index) in list" :key="index">{{item.type}}</div> 


               <!-- 1 福利 人民币送红包  shop_price  welfareReds --> 
               <div class="items" v-if="order.is_shoppingmall_auth == 1" @click="yiji(index,1,item.shop_price,item.welfareReds,item.spec_value_group_id,item.spec_value_group)"   v-bind:class="{activss:indexs==index}"  v-for="(item,index) in list" :key="index">{{item.type}}</div> 


               <!-- 2 纯鸿包   redbag_num-->
               <div class="items" v-if="order.is_shoppingmall_auth == 2" @click="yiji(index,2,item.redbag_num,item.spec_value_group_id,item.spec_value_group)"   v-bind:class="{activss:indexs==index}"  v-for="(item,index) in list" :key="index">{{item.type}}</div> 
              

               <!-- 3 纯人民币   shop_price-->
               <div class="items"  v-if="order.is_shoppingmall_auth == 3" @click="yiji(index,3,item.shop_price,item.spec_value_group_id,item.spec_value_group)"   v-bind:class="{activss:indexs==index}"  v-for="(item,index) in list" :key="index">{{item.type}}</div> 
               <!-- <button class="items"  v-if="order.is_shoppingmall_auth == 3" @click="yiji(index,3,item.shop_price,item.spec_value_group_id,item.spec_value_group)"   v-bind:class="{activss:indexs==index}"  v-for="(item,index) in list" :key="index">
                   {{item.type}}
               </button> -->
            </div>
            <div class="upgoum1" style="margin-top:.1rem"  v-if="order.is_shoppingmall_auth == 3">
                <div class="upti1" style="font-size:15px;">付款方式：</div> 
                <div  class="spr1"> 
                  <yd-radio-group v-model="radio1" color="#ff0000">
                      <yd-radio  val="1">人民币</yd-radio>
                  </yd-radio-group> 
                </div>
            </div> 
            <div class="upgoum1" style="margin-top:.1rem" v-if="order.is_shoppingmall_auth == 0">
                <div class="upti1" style="font-size:15px;">付款方式：</div> 
                <div  class="spr1"> 
                  <yd-radio-group v-model="radio1" color="#ff0000" >
                      <yd-radio val="1">人民币+鸿包</yd-radio>
                  </yd-radio-group>
                </div>
            </div> 
            <div class="upgoum1" style="margin-top:.1rem" v-if="order.is_shoppingmall_auth == 2">
                <div class="upti1" style="font-size:15px;">付款方式：</div> 
                <div  class="spr1"> 
                  <yd-radio-group v-model="radio1" color="#ff0000" v-if="order.is_shoppingmall_auth == 2">
                      <yd-radio   val="1">鸿包</yd-radio>
                  </yd-radio-group>
                </div>
            </div> 
            <div class="upgoum1" style="margin-top:.3rem">
                <div class="upti1"  style="font-size:15px;">购买数量：</div> 
                <div  class="spr1">
                    <yd-spinner unit="1" v-model="spinner" :callback="num"></yd-spinner>
                </div>
            </div>
            <button class="upbtnq1"  type="warning" @click="ggshow()">确定</button>
            <div style="height:.3rem;"></div>
        </yd-popup>
    </div>
</template>
<script>
import Vue from 'vue';
import {Slider, SliderItem} from 'vue-ydui/dist/lib.rem/slider';
Vue.component(Slider.name, Slider);
Vue.component(SliderItem.name, SliderItem);
import { Popup } from "vue-ydui/dist/lib.rem/popup";
Vue.component(Popup.name, Popup);
import { Spinner } from "vue-ydui/dist/lib.rem/spinner";
Vue.component(Spinner.name, Spinner);
import {Radio, RadioGroup} from 'vue-ydui/dist/lib.rem/radio';
Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup);
export default {
  name: "particulars",
  data() {
    return {
      show: false,
      spinner:1,
      order:[],
      radio1: 1,
      orderimg:'',
      indexs:-1,
      list:[],
      hbs:'', 
      son1:'',
      son2:'',
      All:[],
      spgeId:'',
      guoge:'',//规格
      canshu:'',//参数
      moneyprice:'', 
      mtype:'',
      redbag_num:'',
      market_price:'',
      shop_price:'',
      welfareReds:''

    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    store: function() {
      this.$router.push("/store?sid="+this.order.shop_site_id);
    },
    index: function() {
      this.$router.push("/");
    },
    infos:function(id){ 
      let self = this;
      let url = "/api/goods/info";
			self.httpPost(url,{id:id},function(res) {
				if (res.code == 200) {   
          self.order=res.data;
          self.list = res.data.list;
          self.orderimg = res.data.thumb[0];
          self.moneyprice = res.data.market_price;
          self.hbs = res.data.redbag_num;
          self.son1 = res.data.shop_price;
          self.son2 = res.data.welfareReds;
          if(self.list.length==1){
            // self.indexs = 0;
            // self.guoge = self.list[0].spec_value_group_id;
            self.canshu = self.list[0].spec_value_group; 
          }
				}else{
					self.$message.error(res.msg);
				} 
      })
    }, 
    tishi(){
       this.$dialog.toast({mes: `公众号未开放客服，请打开App使用客服功能`});
    },
    //商品规格选择
    // yiji(v,k,g,ge,spid,qian){
    //   this.indexs = v;
    //   console.log(v,k,g,ge,spid,qian);
    //   console.log(qian)
    //   this.guoge = g;
    //   this.son1 = qian
    //   this.order.shop_price = parseInt(qian)
    //   this.order.welfareReds = parseInt(qian)
    //   this.canshu = ge; 
    //   this.spinner = 1;
    //   // this.spgeId = spid;
    // },
     yiji(v,a,b,c,d,e){
      this.spinner = 1;
      if(a == 0){
        // 0 普通 人民币+红包  market_price  redbag_num
        this.market_price = this.order.moneyprice =b
        this.redbag_num = this.order.redbag_num =c 
        this.guoge = d
        this.moneyprice = b
        this.hbs = c
        // this.order.moneyprice = b
        // this.order.redbag_num =c 
        console.log(this.order.moneyprice)
        this.canshu = e
        this.indexs = v;

      }
      if(a == 1){
        // 1 福利 人民币送红包  shop_price  welfareReds
        // this.shop_price = b
        // this.welfareReds = c
        this.guoge = d
        this.son1 = b
        this.son2 = c
        this.order.shop_price = b
        this.order.welfareReds = c
        this.canshu = e

        if(this.guoge == ""){
          this.guoge ='0,0'
        }
        console.log(" this.guoge ", this.guoge )
        this.indexs = v;

      }
      if(a == 2){
        // 2 纯鸿包   redbag_num
        // this.redbag_num = b
        console.log("2",this.redbag_num)
        this.hbs = b
        this.order.shop_price = b
        this.guoge = c
        this.canshu = d
        this.indexs = v;

      }
      if(a == 3){
        // 3 纯人民币   shop_price
        // this.shop_price = b
        if(b == 0){
          this.$dialog.toast({mes: `此商品规格暂无货,请选择其他规格`});
          return
        }else{
          this.indexs = v;
          console.log("3",this.shop_price)
          this.son1 = b
          console.log("son1",this.son1)
          this.order.shop_price = b
          this.guoge = c
          this.canshu = d

          if(this.guoge == ""){
            this.guoge ='0'
          }
        }
     

      }

    },
    num(){
      


      this.hbs = this.spinner * this.redbag_num  // 2 纯鸿包   redbag_num 

      this.son1 = this.spinner * this.order.shop_price   // 3 纯人民币   shop_price

      this.moneyprice = this.spinner *  this.market_price
      console.log(222,this.moneyprice)
      this.son2 =  this.spinner * this.order.welfareReds


      
                
    },
    // num(){
    //   console.log(this.spinner)
    //   this.moneyprice = this.spinner*parseInt(this.order.market_price); //人民币
    //   this.hbs = this.spinner*parseInt(this.order.redbag_num);  //鸿包
    //   this.son1 = this.spinner*parseInt(this.order.shop_price);
    //   this.son2 = this.spinner*parseInt(this.order.welfareReds);
    // },
    //规格确定
    ggshow(){
      if(!this.guoge){
       this.$dialog.toast({mes: `请选择规格`});
       return
      }
      this.show = false;
    },
    //加入购物车
    jiaru(){
      let self = this;
      let url = "/api/shopping/cart";
      if(!this.guoge){
        self.$dialog.toast({mes:"请选择商品规格"});
        this.show = true;
        return
      }
      if(this.order.is_shoppingmall_auth==0){
        this.mtype = 2
      }else if(this.order.is_shoppingmall_auth==1){
        this.mtype = 1
      }else if(this.order.is_shoppingmall_auth==2){
        this.mtype = 3
      }else if(this.order.is_shoppingmall_auth==3){
        this.mtype = 1
      }
			self.httpPost(url,{user_id:this.myid,token:this.token,goods_id:this.order.id,num:this.spinner,money_type:this.mtype,spec:this.guoge},function(res) {
				if (res.code == 200) {   
					self.$dialog.toast({mes: res.msg});
				}else{
					self.$dialog.toast({mes: res.msg});
				} 
      })
    },
    //立即购买
    goumai(){
      if(!this.guoge){
       this.$dialog.toast({mes: `请选择规格`});
       this.show=true;
       return
      } 
      if(this.order.is_shoppingmall_auth==0){
        this.mtype = 2
      }else if(this.order.is_shoppingmall_auth==1){
        this.mtype = 1
      }else if(this.order.is_shoppingmall_auth==2){
        this.mtype = 3
      }else if(this.order.is_shoppingmall_auth==3){
        this.mtype = 1
      }
      console.log("rmb",this.moneyprice)
      this.All={
        num:this.spinner,
        name:this.order.shop_name,
        title:this.order.title,
        img:this.orderimg,
        canshus:this.canshu,
        rmb:this.moneyprice,
        rhb:this.hbs,
        xson1:this.son1,
        xson2:this.son2,
        dianpuid:this.order.shop_site_id,
        spId:this.guoge,
        money_type:this.mtype,
        is_shoppingmall_auth:this.order.is_shoppingmall_auth,
        id:this.order.id
      }
      
      localStorage.setItem("goodsCategory", JSON.stringify(this.All));
      this.$router.push("/shopaccounts");
    }
  },
  created(){
     document.title="商品详情" 
     this.token = localStorage.getItem('mytoken');
     this.myid = localStorage.getItem('myid');   
     this.id = this.$route.query.id;
     this.infos(this.id)
  } 
};
</script>
<style>
.boxshou{
  display: flex;
  flex-wrap: wrap;
  padding:.2rem .25rem;
}
.items{
  border: 1px solid #dddddd;
  line-height: .4rem;
  margin-left: .1rem;
  font-size: .28rem;
  border-radius: 5px;
  padding: 2px 4px;
  margin-bottom: .1rem;
  color: #666;
}
.activss{
  color: #ff0000;
  border: 1px solid #ff0000;
}
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}

.parmain_top1 {
  width: 100%;
  background: #fff;
  /* padding-top: .2rem; */
}
.parmain1 {
  width: 95%;
  margin: 0 auto;
}
.parminimg1 {
  width: 100%;
  min-height: 4.5rem;
}
.parminimg1 img {
  width: 100%;
}
.parmaintop_bot1 {
  padding-bottom: 0.1rem;
  /* display: flex; */
  /* flex-direction: column; */
}
.parbot1 {
  height: 0.5rem;
  line-height: 0.5rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.parbot1 > div {
  display: flex;
  height: 0.4rem;
}
.parbot1 > div div:first-child {
  font-size: 0.35rem;
  color: #e85454;
  margin-right: 0.2rem;
}
.parbot1 > div div:nth-child(2) {
  width: 1.5rem;
  height: 0.35rem;
  line-height: 0.38rem;
  text-align: center;
  background: #f3ae71;
  color: #fff;
  border-radius: 0.1rem;
  margin: auto 0;
}
.rx1 {
  width: 0.7rem;
  height: 0.35rem !important;
  text-align: center;
  line-height: 0.38rem;
  color: #fff;
  background: #ff0000;
  border-radius: 0.08rem;
}
.rx1 span {
  width: 100%;
}
.hongbao1 {
  /* width: 40%; */
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.25rem;
  border: 0.02rem solid #f77138;
  text-align: center;
  color: #f77138;
  display: inline-block;
}
.partitle1 {
  margin: 0.16rem 0 0.22rem;
  font-size: 0.3rem;
}
.parsolid1 {
  display: flex;
  justify-content: space-between;
  color: #999;
}
.store1 {
  height: 1rem;
  background: #fff;
  margin: 0.1rem 0;
  display: flex;
  justify-content: space-between;
  padding-right: .2rem;
  padding-left: .2rem;
}
.parlogoimg1 {
  margin: auto 0;
  height: 0.57rem;
  padding: 0 2.5%;
}
.parlogoimg1 img {
  height: 100%;
  width: .55rem;
}
.parstorem1 {
  height: 0.57rem;
  margin: auto 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.parstorem1 > div:first-child {
  font-size: 0.25rem;
}
.parstorem1 > div:last-child {
  color: #999;
}
.parstorem1 >img{
  width: .5rem;
  height: .5rem;
  margin-right: .2rem;
}
.parjind1 {
  width: 1.44rem;
  height: 0.49rem;
  text-align: center;
  line-height: 0.49rem;
  background: #f3ae71;
  color: #fff;
  margin: auto 0 auto 2rem;
  border-radius: 0.1rem;
}
.xiangqing1 {
  background: #fff;
}
.xqtitle1 {
  padding: 0.1rem 2.5%;
  font-size: 0.25rem;
  color: #f77138;
}
.xqimg1 {
  width: 100%;
  margin: 0 auto;
}
.ym {
  height: 1rem;
}
.xqimg1 img {
  width: 100%;
  display: block;
}
.parfoot1 {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 0.05rem 2.5%;
  background: #fff;
  color: #999;
  justify-content: space-between;
}
.parfoot1>div:nth-child(1){
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: .4rem;
  justify-content: space-between;
}
.parfsy1 {
  width: 0.5rem;
  white-space: nowrap;
  text-align: center;
  margin-right: .5rem;
}

.parfsy1 img {
  width: 100%;
}
.goumai1 {
  height: 0.63rem;
  line-height: 0.63rem;
  display: flex;
  margin: auto 0;
  color: #fff;
  margin-left: 0.6rem;
}
.goumai1 div {
  text-align: center;
  width: 1.98rem;
}
.shoppingcart1 {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
  background: #f3ae71;
}
.purchase1 {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  background: #f77138;
}
.upimg1 {
  width: 90%;
  margin: 0.5rem auto 0;
}
.upimg1 img {
  width:2rem;
}
.upimg1 span{
  color: #ff0000;
  font-size: .35rem;
  margin-left: .1rem;
}
.upgoum1 {
  width: 90%;
  margin: 0.8rem auto 0;
  display: flex;
  justify-content: space-between;
}
.upti1 {
  font-size: 0.4rem;
  color: #999;
}
.upbtnq1 {
  width: 80%;
  height: 0.75rem;
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.75rem;
  margin: 0.5rem auto 0;
  background: #f77138;
  color: #fff;
  border-radius: 0.2rem;
  border: none;
  margin-left: 10%;
}
.ss{
  height: .85rem!important;
  align-items: center;
}
.ss img{
  width: .2rem;
  display: block;
  height: 100%;
}
</style>
<style>
.yd-popup-show {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.upgoum1 .yd-spinner {
  width: 2.5rem !important;
}
.upgoum1 .yd-spinner > input {
  width: 25% !important;
  background: #999;
  color: #000;
}
.upgoum1 .yd-spinner > span {
  width: 25%;
  background: #999;
  margin: 0 0.05rem;
}
.yd-spinner-square:after,
.yd-spinner-square:before {
  height: 0;
}
.yd-spinner > span > i:after {
  color: #000;
}
.spr1 .yd-spinner > span:first-child {
  background: #eee;
}
.spr1 .yd-spinner > span:first-child > i:after {
  color: #999;
}

</style>

